<template>
  <div class="container">
    <!-- 导航条 -->
    <van-nav-bar
      fixed
      title="添加收货地址"
      :left-arrow="true"
      :placeholder="true"
      @click-left="$router.back()"
    />

    <van-cell-group>
      <van-field v-model="userName" label="用户名" placeholder="请输入用户名" />
    </van-cell-group>

    <van-cell-group>
      <van-field v-model="phoneNum" label="手机号" placeholder="请输入手机号" />
    </van-cell-group>
 
    <van-field
      v-model="fieldValue"
      is-link
      readonly
      label="地区"
      placeholder="请选择所在地区"
      @click="show = true"
    />
    <van-popup v-model="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        @close="show = false"
        @finish="onFinish"
      />
    </van-popup>


    <van-cell-group>
      <van-field v-model="phoneNum" label="详细地址" placeholder="请输入详细地址" />
    </van-cell-group>
 

    <div class="add-btn" @click="addAct">添加</div>

  </div>
</template>

<script>
import { getRegion } from "@/api";
import { Toast } from "vant";

export default {
  name: "addAddress",
  data() {
    return {
      show: false,
      userName: "",
      phoneNum: "",
      address: "", // 选项列表，children 代表子选项，支持多级嵌套
      cascaderValue: "",
      fieldValue: "",
      options: [
        {
          text: "浙江省",
          value: "330000",
          children: [{ text: "杭州市", value: "330100" }],
        },
        {
          text: "江苏省",
          value: "320000",
          children: [{ text: "南京市", value: "320100" }],
        },
      ],
    };
  },
  created() {
    this.getRegionAddress();
  },
  methods: {
    selectAddress() {
      console.log("111111111111");
    },
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");


      console.log(selectedOptions)

    },
    // 获取
    async getRegionAddress() {
      const resp = await getRegion();
      // this.options = list
      console.log(resp);
    },

    // 添加收货地址
    addAct(){

        if(!this.userName) {
            Toast('请添加收货人姓名')
            return
        }

        if(!this.phoneNum) {
            Toast('请添加收货人手机号')
            return
        }

        if(!this.fieldValue) {
            Toast('请选择收货地址')
            return
        }





    }
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;

  .add-btn {
    margin-top: 50px;
    margin-left: 30px;
    margin-right: 30px;
    height: 40px;
    text-align: center;
    color: white;
    background-color: orangered;
    border-radius: 20px;
    font-size: 15px;
    line-height: 40px;
  }

}
</style>
